CSS View Transition Root: Tag kontrol over sideovergange

CSS View Transitions API'en tilbyder en kraftfuld måde at skabe glidende og visuelt tiltalende overgange mellem forskellige tilstande i din webapplikation. Selvom standardadfærden ofte fungerer godt, har du nogle gange brug for mere detaljeret kontrol over, hvordan disse overgange sker. Det er her, view-transition-root-egenskaben kommer ind i billedet. Den giver dig mulighed for at udpege et specifikt element som roden for view-overgange, hvilket gør det muligt at orkestrere mere komplekse og raffinerede animationer.

Forståelse af grundlæggende principper i View Transitions API

Før vi dykker ned i view-transition-root, lad os kort opsummere de grundlæggende principper i View Transitions API'en.

Kernefunktionen er document.startViewTransition(updateCallback). Denne funktion fanger sidens aktuelle tilstand, udfører den angivne updateCallback (som typisk indebærer at ændre DOM'en), og animerer derefter ændringerne. Bag kulisserne opretter API'en midlertidige pseudo-elementer (::view-transition, ::view-transition-group(*) og ::view-transition-image(*)), der repræsenterer "før"- og "efter"-tilstandene for de elementer, der er involveret i overgangen. CSS bruges derefter til at animere disse pseudo-elementer og skabe den visuelle overgangseffekt.

Som et simpelt eksempel kan du overveje et scenarie, hvor du vil tone ét indholdsafsnit ud og et andet ind:

            
// JavaScript
function navigate(newContent) {
  document.startViewTransition(() => {
    // Update the DOM with the new content
    document.querySelector('#content').innerHTML = newContent;
  });
}

            

              
                Copy
              
            
          

            
/* CSS */
::view-transition-old(root), ::view-transition-new(root) {
  animation: none;
}

::view-transition-old(root) {
  z-index: 2;
}

::view-transition-new(root) {
  z-index: 1;
}


::view-transition-old(content) {
  animation: fade-out 0.5s;
}

::view-transition-new(content) {
  animation: fade-in 0.5s;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}


            

              
                Copy
              
            
          

Behovet for view-transition-root

Som standard behandler View Transitions API'en hele dokumentet som overgangsroden. Det betyder, at overgange påvirker hele viewporten. Selvom dette fungerer godt for grundlæggende sidenavigationer, kan det blive problematisk, når du ønsker at:

• Isolere overgange: Forhindre overgange i at påvirke urelaterede dele af siden. Forestil dig en single-page application (SPA) med en vedvarende sidebjælke. Du vil måske have, at overgange kun påvirker hovedindholdsområdet og lader sidebjælken være urørt.
• Oprette indlejrede overgange: Implementere overgange inden i overgange. For eksempel et modalvindue, der vises med sin egen unikke animation, mens den underliggende side også overgår.
• Optimere ydeevne: Reducere overgangens omfang for at forbedre ydeevnen, især på komplekse sider. At animere kun en specifik sektion af siden kan være betydeligt hurtigere end at animere hele dokumentet.
• Finkornet kontrol: Præcist styre, hvilke elementer der deltager i overgangen, og hvordan de animeres.

Introduktion til view-transition-root

CSS-egenskaben view-transition-root giver dig mulighed for at specificere et element, der skal fungere som rod for view-overgange. Når den er sat på et element, vil View Transitions API'en kun spore og animere ændringer inden for dette elements undertræ. Alt uden for dette undertræ vil forblive upåvirket af overgangen.

Syntaksen er ligetil:

            
#my-transition-root {
  view-transition-root: true;
}

            

              
                Copy
              
            
          

Ved at sætte view-transition-root: true på et element (i dette tilfælde et element med ID'et "my-transition-root") fortæller du View Transitions API'en, at den skal behandle det element som grænsen for overgange. Kun ændringer inden for det element og dets børn vil blive animeret.

Praktiske eksempler på view-transition-root

Lad os udforske nogle praktiske scenarier, hvor view-transition-root kan være særligt nyttig.

1. SPA-indholdsovergange med vedvarende sidebjælke

Overvej et typisk SPA-layout med en fast sidebjælke og et indholdsområde, der ændres baseret på navigation. Uden view-transition-root kan navigation mellem indholdsvisninger få hele siden, inklusive sidebjælken, til at flimre eller kortvarigt forsvinde under overgangen.

For at undgå dette kan du anvende view-transition-root på indholdsområdet:

            

  
  

    
  


            

              
                Copy
              
            
          

            
#content-area {
  view-transition-root: true;
}

            

              
                Copy
              
            
          

Når du nu navigerer mellem forskellige indholdssektioner inden for #content-area, vil kun det område overgå, mens sidebjælken forbliver urørt. Dette giver en meget mere glidende og professionel brugeroplevelse.

2. Overgange for modalvinduer

Forestil dig et scenarie, hvor du vil vise et modalvindue med en specifik animation, samtidig med at du dæmper baggrundssiden let. Du kan bruge view-transition-root til at isolere modalvinduets overgang fra resten af siden.

            

  



  

    
  


            

              
                Copy
              
            
          

            
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden; /* Initially hidden */
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  view-transition-root: true; /* Make the modal the transition root */
  transform: scale(0); /* Initially scaled down */
}

.modal.show {
    visibility: visible;
}

::view-transition-old(modal), ::view-transition-new(modal) {
    animation: none;
}

::view-transition-new(modal) {
    animation: modal-in 0.3s ease-out forwards;
}

@keyframes modal-in {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

            

              
                Copy
              
            
          

I dette eksempel sikrer view-transition-root: true på .modal-elementet, at kun modalvinduets indhold animeres under overgangen. Du kan derefter bruge CSS-animationer til at styre, hvordan modalvinduet vises (f.eks. skalering ind, toning ind), mens baggrundssiden forbliver relativt statisk (du kan anvende en separat, enklere animation til at dæmpe baggrunden).

3. Omarrangering af listeelementer med glidende animationer

Overvej en liste af elementer, hvor brugere kan omarrangere dem. Ved at bruge view-transition-root kan man skabe glidende animationer, når elementer flyttes inden for listen.

            

  
Item 1
  
Item 2
  
Item 3


            

              
                Copy
              
            
          

            
#sortable-list {
  list-style: none;
  padding: 0;
  margin: 0;
  view-transition-root: true;
}

.list-item {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  cursor: grab;
}

/* Optional: Style for dragging */
.list-item.dragging {
  opacity: 0.5;
}

/* Add view-transition-name to uniquely identify each list item */
.list-item[data-id="1"] { view-transition-name: item-1; }
.list-item[data-id="2"] { view-transition-name: item-2; }
.list-item[data-id="3"] { view-transition-name: item-3; }


            

              
                Copy
              
            
          

            
const sortableList = document.getElementById('sortable-list');
let draggedItem = null;

sortableList.addEventListener('dragstart', (e) => {
    draggedItem = e.target;
    e.target.classList.add('dragging');
});

sortableList.addEventListener('dragend', (e) => {
    e.target.classList.remove('dragging');
    draggedItem = null;
});

sortableList.addEventListener('dragover', (e) => {
    e.preventDefault();
});

sortableList.addEventListener('drop', (e) => {
    e.preventDefault();
    const targetItem = e.target;

    if (targetItem.classList.contains('list-item') && targetItem !== draggedItem) {
        const items = Array.from(sortableList.querySelectorAll('.list-item'));
        const draggedIndex = items.indexOf(draggedItem);
        const targetIndex = items.indexOf(targetItem);

        document.startViewTransition(() => {
           if (draggedIndex < targetIndex) {
               sortableList.insertBefore(draggedItem, targetItem.nextSibling);
           } else {
               sortableList.insertBefore(draggedItem, targetItem);
           }
        });
    }
});


            

              
                Copy
              
            
          

Ved at sætte view-transition-root: true på `ul`-elementet vil omarrangeringen af `li`-elementerne inden i listen blive animeret. `view-transition-name` er afgørende her. Det giver en unik identifikator for hvert listeelement, hvilket gør det muligt for View Transitions API'en at spore dets bevægelse under omarrangeringsprocessen. Uden `view-transition-name` ville API'en behandle hele listen som en enkelt enhed, og animationen ville sandsynligvis være en simpel ind-/udtoning.

Vigtig bemærkning: Egenskaben view-transition-name er afgørende for, at view-overgange fungerer korrekt. Det er den unikke identifikator, der fortæller browseren, hvilke elementer i den gamle og nye tilstand der svarer til hinanden. Uden den kan browseren ikke skabe en glidende overgang. Hvert element, der deltager i view-overgangen, skal have et unikt view-transition-name inden for roden.

Overvejelser og bedste praksis

• Ydeevne: Selvom view-transition-root kan forbedre ydeevnen ved at begrænse overgangenes omfang, skal du være opmærksom på kompleksiteten af de animationer, du skaber. Overdrevne eller dårligt optimerede animationer kan stadig føre til ydeevneproblemer. Brug browserens udviklerværktøjer til at profilere dine overgange og identificere potentielle flaskehalse.
• Overlappende overgange: Undgå at skabe overlappende overgange på det samme element. Dette kan føre til uventet adfærd og visuelle fejl. Planlæg dine overgange omhyggeligt for at sikre, at de ikke forstyrrer hinanden.
• Tilgængelighed: Sørg for, at dine overgange er tilgængelige for alle brugere. Undgå at bruge animationer, der er for hurtige eller indeholder blinkende elementer, da disse kan udløse anfald hos nogle personer. Giv brugerne mulighed for at deaktivere animationer, hvis de foretrækker det. Vær opmærksom på brugere med vestibulære lidelser eller bevægelsesfølsomhed.
• Progressiv forbedring: View Transitions API'en er en relativt ny funktion. Implementer dine overgange som en progressiv forbedring. Det betyder, at din applikation stadig skal fungere korrekt i browsere, der ikke understøtter API'en. Brug funktionsdetektering (document.startViewTransition) til betinget at anvende overgangene.
• Kompleksitetsstyring: Efterhånden som kompleksiteten af dine overgange vokser, kan du overveje at bruge et bibliotek eller framework til at hjælpe med at administrere tilstand og animationer. Dette kan gøre din kode mere vedligeholdelsesvenlig og lettere at fejlfinde.
• Test: Test dine overgange grundigt på forskellige browsere og enheder for at sikre, at de fungerer som forventet. Vær opmærksom på ydeevne, visuel nøjagtighed og tilgængelighed.

Browserunderstøttelse og funktionsdetektering

Fra slutningen af 2024 har View Transitions API'en god understøttelse i moderne browsere som Chrome, Edge og Safari. Firefox arbejder aktivt på implementeringen. Det er dog afgørende at bruge funktionsdetektering for at sikre, at din kode håndterer browsere, der endnu ikke understøtter API'en, på en elegant måde.

Her kan du se, hvordan du kan bruge funktionsdetektering:

            
if (document.startViewTransition) {
  // Use the View Transitions API
  document.startViewTransition(() => {
    // Update the DOM
  });
} else {
  // Fallback: Update the DOM without a transition
  // ...
}

            

              
                Copy
              
            
          

Denne kode kontrollerer, om funktionen document.startViewTransition eksisterer. Hvis den gør det, bruges View Transitions API'en. Ellers bruges en fallback-mekanisme til at opdatere DOM'en uden en overgang. Dette sikrer, at din applikation forbliver funktionel selv i ældre browsere.

Ud over det grundlæggende: Avancerede teknikker

Når du er fortrolig med det grundlæggende i view-transition-root, kan du udforske mere avancerede teknikker for at skabe endnu mere sofistikerede overgange.

• Overgange med delte elementer: Animér elementer, der er fælles mellem to visninger, såsom et billede, der udvides fra et miniaturebillede til en fuldskærmsvisning. Dette indebærer at tildele det samme `view-transition-name` til elementet i begge visninger.
• Forskudte animationer: Skab animationer, hvor elementer vises i en forskudt rækkefølge, hvilket tilføjer en følelse af dybde og dynamik til overgangen.
• Brugerdefinerede CSS-egenskaber: Brug brugerdefinerede CSS-egenskaber (variabler) til at styre animationsparametrene, så du nemt kan ændre udseendet og fornemmelsen af dine overgange uden at ændre kernekoden.

Globalt perspektiv på View Transitions

Når du implementerer view-overgange for et globalt publikum, skal du overveje følgende:

• Animationshastighed: Vær opmærksom på brugere med varierende internethastigheder. Optimer dine animationer for at sikre, at de indlæses hurtigt, selv på langsommere forbindelser.
• Kulturelle præferencer: Animationsstile kan opfattes forskelligt på tværs af kulturer. Undersøg og overvej kulturelle præferencer, når du designer dine overgange. Nogle kulturer foretrækker måske subtile animationer, mens andre måske omfavner mere dramatiske effekter.
• Sprogunderstøttelse: Hvis din applikation understøtter flere sprog, skal du sikre, at dine overgange fungerer korrekt med forskellige tekstretninger (f.eks. venstre-til-højre og højre-til-venstre).
• Enhedskompatibilitet: Test dine overgange på en række forskellige enheder, herunder mobiltelefoner, tablets og desktops, for at sikre, at de giver en ensartet oplevelse på tværs af forskellige skærmstørrelser og opløsninger.

Konklusion

Egenskaben view-transition-root er et værdifuldt værktøj for webudviklere, der søger finere kontrol over sideovergange. Ved at udpege specifikke elementer som overgangsrødder kan du isolere overgange, skabe indlejrede animationer, optimere ydeevnen og forbedre den samlede brugeroplevelse. Efterhånden som View Transitions API'en modnes og får bredere browserunderstøttelse, vil view-transition-root blive en stadig mere essentiel teknik til at bygge moderne, engagerende webapplikationer.

Omfavn kraften i View Transitions API'en og view-transition-root for at skabe visuelt imponerende og brugervenlige weboplevelser, der fanger dit publikum og adskiller din applikation fra konkurrenterne. Husk at prioritere tilgængelighed, ydeevne og tvær-browser-kompatibilitet for at sikre en problemfri oplevelse for alle brugere, uanset deres placering eller enhed.

Eksperimentér, iterér og del dine kreationer med fællesskabet. Verdenen af webovergange udvikler sig konstant, og dine bidrag kan hjælpe med at forme fremtiden for webdesign.